<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度显示和FFmpeg合并修复测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 6px;
        }
        .test-section h3 {
            margin-top: 0;
            color: #333;
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        .progress-fill {
            height: 100%;
            background-color: #4CAF50;
            transition: width 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: bold;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-weight: bold;
        }
        .status.success { background-color: #d4edda; color: #155724; }
        .status.error { background-color: #f8d7da; color: #721c24; }
        .status.info { background-color: #d1ecf1; color: #0c5460; }
        .log {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            max-height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 10px 0;
        }
        .info-item {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            border-left: 4px solid #007bff;
        }
        .info-label {
            font-weight: bold;
            color: #495057;
        }
        .info-value {
            color: #6c757d;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>进度显示和FFmpeg合并修复测试</h1>
        
        <div class="test-section">
            <h3>1. 事件监听器测试</h3>
            <div id="eventStatus" class="status info">检查事件监听器状态...</div>
            <button onclick="testEventListeners()">测试事件监听器</button>
            <button onclick="clearLog()">清空日志</button>
            <div id="eventLog" class="log"></div>
        </div>

        <div class="test-section">
            <h3>2. 进度显示测试</h3>
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">当前进度</div>
                    <div id="currentProgress" class="info-value">0%</div>
                </div>
                <div class="info-item">
                    <div class="info-label">下载速度</div>
                    <div id="downloadSpeed" class="info-value">0 B/s</div>
                </div>
                <div class="info-item">
                    <div class="info-label">已下载大小</div>
                    <div id="downloadedSize" class="info-value">0 B</div>
                </div>
                <div class="info-item">
                    <div class="info-label">总大小</div>
                    <div id="totalSize" class="info-value">0 B</div>
                </div>
            </div>
            <div class="progress-bar">
                <div id="progressFill" class="progress-fill" style="width: 0%">0%</div>
            </div>
            <button onclick="startProgressTest()">开始进度测试</button>
            <button onclick="stopProgressTest()">停止进度测试</button>
        </div>

        <div class="test-section">
            <h3>3. FFmpeg合并测试</h3>
            <div id="ffmpegStatus" class="status info">检查FFmpeg状态...</div>
            <button onclick="testFFmpeg()">测试FFmpeg</button>
            <div id="ffmpegLog" class="log"></div>
        </div>

        <div class="test-section">
            <h3>4. 任务状态同步测试</h3>
            <div id="syncStatus" class="status info">检查任务同步状态...</div>
            <button onclick="testTaskSync()">测试任务同步</button>
            <div id="syncLog" class="log"></div>
        </div>
    </div>

    <script>
        let progressInterval;
        let testProgress = 0;
        let testSpeed = 0;

        // 日志函数
        function log(message, containerId = 'eventLog') {
            const container = document.getElementById(containerId);
            const timestamp = new Date().toLocaleTimeString();
            container.innerHTML += `[${timestamp}] ${message}\n`;
            container.scrollTop = container.scrollHeight;
        }

        function clearLog(containerId = 'eventLog') {
            document.getElementById(containerId).innerHTML = '';
        }

        // 测试事件监听器
        function testEventListeners() {
            const status = document.getElementById('eventStatus');
            
            if (window.electronAPI) {
                status.className = 'status success';
                status.textContent = 'Electron API 可用';
                log('Electron API 可用', 'eventLog');
                
                // 测试事件监听器设置
                try {
                    window.electronAPI.onDownloadProgress((event, data) => {
                        log(`收到进度事件: ${JSON.stringify(data)}`, 'eventLog');
                    });
                    
                    window.electronAPI.onDownloadCompleted((event, data) => {
                        log(`收到完成事件: ${JSON.stringify(data)}`, 'eventLog');
                    });
                    
                    window.electronAPI.onDownloadError((event, data) => {
                        log(`收到错误事件: ${JSON.stringify(data)}`, 'eventLog');
                    });
                    
                    log('事件监听器设置成功', 'eventLog');
                } catch (error) {
                    log(`事件监听器设置失败: ${error.message}`, 'eventLog');
                }
            } else {
                status.className = 'status error';
                status.textContent = 'Electron API 不可用';
                log('Electron API 不可用', 'eventLog');
            }
        }

        // 进度测试
        function startProgressTest() {
            testProgress = 0;
            testSpeed = 1024 * 1024; // 1MB/s
            
            progressInterval = setInterval(() => {
                testProgress += Math.random() * 5;
                if (testProgress > 100) testProgress = 100;
                
                // 更新进度条
                const progressFill = document.getElementById('progressFill');
                progressFill.style.width = testProgress + '%';
                progressFill.textContent = Math.round(testProgress) + '%';
                
                // 更新信息
                document.getElementById('currentProgress').textContent = Math.round(testProgress) + '%';
                document.getElementById('downloadSpeed').textContent = formatBytes(testSpeed) + '/s';
                document.getElementById('downloadedSize').textContent = formatBytes(testProgress * 1024 * 1024);
                document.getElementById('totalSize').textContent = formatBytes(100 * 1024 * 1024);
                
                // 模拟发送进度事件
                if (window.electronAPI) {
                    const mockData = {
                        taskId: 'test-task-' + Date.now(),
                        status: 'downloading',
                        progress: testProgress,
                        downloadedSize: testProgress * 1024 * 1024,
                        totalSize: 100 * 1024 * 1024,
                        downloadedSegments: Math.floor(testProgress / 10),
                        totalSegments: 10,
                        downloadSpeed: testSpeed
                    };
                    
                    // 触发自定义事件来模拟进度更新
                    const event = new CustomEvent('mock-progress', { detail: mockData });
                    window.dispatchEvent(event);
                }
                
                if (testProgress >= 100) {
                    stopProgressTest();
                }
            }, 200);
        }

        function stopProgressTest() {
            if (progressInterval) {
                clearInterval(progressInterval);
                progressInterval = null;
            }
        }

        // 测试FFmpeg
        async function testFFmpeg() {
            const status = document.getElementById('ffmpegStatus');
            
            if (window.electronAPI) {
                try {
                    status.className = 'status info';
                    status.textContent = '正在检查FFmpeg...';
                    
                    const result = await window.electronAPI.getFfmpegInfo();
                    
                    if (result.success) {
                        status.className = 'status success';
                        status.textContent = 'FFmpeg 可用';
                        log(`FFmpeg 路径: ${result.data.path}`, 'ffmpegLog');
                        log(`FFmpeg 状态: ${result.data.version}`, 'ffmpegLog');
                    } else {
                        status.className = 'status error';
                        status.textContent = 'FFmpeg 不可用';
                        log(`FFmpeg 错误: ${result.error}`, 'ffmpegLog');
                    }
                } catch (error) {
                    status.className = 'status error';
                    status.textContent = 'FFmpeg 检查失败';
                    log(`FFmpeg 检查异常: ${error.message}`, 'ffmpegLog');
                }
            } else {
                status.className = 'status error';
                status.textContent = 'Electron API 不可用';
                log('Electron API 不可用，无法测试FFmpeg', 'ffmpegLog');
            }
        }

        // 测试任务同步
        async function testTaskSync() {
            const status = document.getElementById('syncStatus');
            
            if (window.electronAPI) {
                try {
                    status.className = 'status info';
                    status.textContent = '正在同步任务...';
                    
                    const result = await window.electronAPI.getTaskList();
                    
                    if (result.success) {
                        status.className = 'status success';
                        status.textContent = `同步成功，共 ${result.data.length} 个任务`;
                        log(`任务列表: ${JSON.stringify(result.data, null, 2)}`, 'syncLog');
                    } else {
                        status.className = 'status error';
                        status.textContent = '任务同步失败';
                        log(`同步错误: ${result.error}`, 'syncLog');
                    }
                } catch (error) {
                    status.className = 'status error';
                    status.textContent = '任务同步异常';
                    log(`同步异常: ${error.message}`, 'syncLog');
                }
            } else {
                status.className = 'status error';
                status.textContent = 'Electron API 不可用';
                log('Electron API 不可用，无法同步任务', 'syncLog');
            }
        }

        // 格式化字节数
        function formatBytes(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 页面加载时自动测试
        window.addEventListener('load', () => {
            testEventListeners();
            testFFmpeg();
            testTaskSync();
        });

        // 监听模拟进度事件
        window.addEventListener('mock-progress', (event) => {
            log(`模拟进度事件: ${JSON.stringify(event.detail)}`, 'eventLog');
        });
    </script>
</body>
</html>
